<template>
  <div class="demand-waper">
    <div class="demand-waper title">
      <img src="../../assets/images/binzhou/title-four.png" alt="" />
    </div>
    <div class="two-list">
      <div class="two-item">
        <span>覆盖专业</span>
        <count-to :end-val="info.coverNum" :delay="delay"></count-to>
      </div>
      <div class="two-item">
        <span>专业覆盖率</span>
        <count-to :end-val="info.coverRate" :delay="delay"></count-to>
        <span class="text">%</span>
      </div>
    </div>
    <div class="pie-chart">
      <div class="item1">
        <div class="project">
          <span class="project-color1"></span>
          <span @click="clickItem('营销')">营销</span>
          <span>{{ info.marketing }}</span>
        </div>
        <div class="project">
          <span class="project-color2"></span>
          <span @click="clickItem('财务')">财务</span>
          <span>{{ info.finance }}</span>
        </div>
        <div class="project">
          <span class="project-color3"></span>
          <span @click="clickItem('互联网')">互联网</span>
          <span>{{ info.equipment }}</span>
        </div>
        <div class="project">
          <span class="project-color4"></span>
          <span @click="clickItem('调控')">调控</span>
          <span>{{ info.regulation }}</span>
        </div>
      </div>
      <div class="item2">
        <img src="../../assets/images/binzhou/major.png" alt="" />
        <div id="chart" ref="chart" :style="{ width: '148px', height: '148px' }"></div>
      </div>

      <div class="item1">
        <div class="project">
          <span class="project-color5"></span>
          <span @click="clickItem('运检')">运检</span>
          <span>{{ info.transportation }}</span>
        </div>
        <div class="project">
          <span class="project-color6"></span>
          <span @click="clickItem('综合')">供服</span>
          <span>{{ info.comprehensive }}</span>
        </div>
        <div class="project">
          <span class="project-color7"></span>
          <span @click="clickItem('人资')">人资</span>
          <span>{{ info.humanResources }}</span>
        </div>
        <div class="project">
          <span class="project-color8"></span>
          <span @click="clickItem('其他')">其他</span>
          <span>{{ info.other }}</span>
        </div>
      </div>
    </div>
    <modal-dialog :show="showVideo" @close="showVideo = false">
      <video width="1200" class="video" :src="videoUrl" autoplay controls loop></video>
    </modal-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { nextTick, onMounted, ref, watch, reactive } from 'vue'
  import * as echarts from 'echarts'
  import { CountTo } from 'vue3-count-to'
  import ModalDialog from '@/components/Binzhou/modal-dialog.vue'
  const chart = ref()
  const props = defineProps({
    info: {
      type: Object,
      default: () => ({})
    }
  })
  let num = ref<number>(30)
  const list = reactive({ data: {} })
  let delay = ref<number>(2000)
  let showVideo = ref(false)

  let videoUrl = ref(window.location.origin + '/videos/qt.mp4')

  const renderChart = () => {
    const info = reactive(props.info)
    list.data = [
      { value: info.marketing, name: '营销' },
      { value: info.finance, name: '财务' },
      { value: info.equipment, name: '设备' },
      { value: info.regulation, name: '调控' },
      { value: info.transportation, name: '运检' },
      { value: info.comprehensive, name: '综合' },
      { value: info.humanResources, name: '人资' },
      { value: info.other, name: '其他' }
    ]
    var eCharts = echarts.init(document.getElementById('chart') as HTMLDivElement)
    const option = {
      title: {
        text: '专业',
        x: 'center',
        y: '85',
        textStyle: {
          fontSize: 14,
          color: '#FFFFFF'
        },
        subtextStyle: {
          fontSize: 14,
          color: '#eaecef'
        }
      },
      tooltip: {
        trigger: 'item'
      },
      color: [
        '#2FC6B1',
        '#367878',
        '#1634E5',
        '#2E62B1',
        '#4A2DD4',
        '#0F1A88',
        '#ACBAC5',
        '#4A96D5'
      ],
      series: [
        {
          type: 'pie',
          radius: ['75%', '90%'],
          avoidLabelOverlap: true,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '40',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: list.data
        }
      ]
    }
    eCharts.setOption(option)
  }
  watch(
    props,
    () => {
      renderChart()
    },
    {
      deep: true
    }
  )
  onMounted(() => {
    nextTick(() => {
      renderChart()
    })
  })

  const clickItem = (item?: string) => {
    console.log('item', item)
    if (item == '其他') {
      // 播放视频
      showVideo.value = true
    } else {
      // 打开页面
      window.open('http://10.141.183.86:3000/systemSettings/organizations')
    }
  }
</script>
<style lang="scss" scoped>
  .demand-waper {
    width: 390px;
    height: 324px;
    .title {
      width: 359px;
      height: 42px;
      background-image: url('@/assets/images/binzhou/icon-four.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      margin-bottom: 22px;
      padding-top: 14px;
      padding-left: 19px;
      img {
        display: inline-block;
        height: 16px;
      }
    }
    .two-list {
      margin-top: 30px;
      margin-bottom: 43px;
      display: flex;
      .two-item {
        &:first-child {
          margin-left: 49px;
        }
        &:last-child {
          margin-left: 45px;
        }
        span {
          font-size: 14px;
          color: #ffffff;
          font-family: Microsoft YaHei;
          &:first-child {
            margin-right: 12px;
          }
          &:nth-child(2) {
            font-family: DIN;
            font-weight: bold;
            color: #00ffe3;
            font-size: 18px;
          }
          &:last-child {
            font-family: DIN;
            font-weight: bold;
            color: #00ffe3;
            font-size: 18px;
          }
        }
      }
    }
    .pie-chart {
      display: flex;
      margin-left: 10px;
      margin-top: 22px;
      position: relative;
      .item1 {
        width: 90px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-left: 8px;
        .project {
          margin-bottom: 18.5px;
          width: 92px;
          white-space: nowrap;
          cursor: pointer;
          &:first-child {
            margin-top: 0px;
          }
          span {
            display: inline-block;
            font-size: 12px;
            &:first-child {
              width: 8px;
              height: 8px;
              background-color: #2fc6b1;
            }
            &:nth-child(2) {
              margin-left: 8px;
              font-size: 12px;
              color: #ffffff;
              font-family: Microsoft YaHei;
            }
            &:nth-child(3) {
              margin-left: 8px;
              font-size: 15px;
              color: #00ffe3;
              font-family: DIN;
              font-weight: 400;
            }
          }
        }
      }
      .item2 {
        display: inline-block;
        width: 148px;
        height: 148px;
        img {
          position: absolute;
          top: 45px;
          left: 146px;
          width: 40px;
          height: 36px;
        }
      }
      .item3 {
        width: 84px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }
  }
  .project-color1 {
    background-color: #2fc6b1 !important;
  }
  .project-color2 {
    background-color: #367878 !important;
  }
  .project-color3 {
    background-color: #1634e5 !important;
  }
  .project-color4 {
    background-color: #2e62b1 !important;
  }
  .project-color5 {
    background-color: #4a2dd4 !important;
  }
  .project-color6 {
    background-color: #0f1a88 !important;
  }
  .project-color7 {
    background-color: #acbac5 !important;
  }
  .project-color8 {
    background-color: #4a96d5 !important;
  }
</style>
